<script lang="ts" name="index" setup>
// import { FormOptions } from '@/components/Form/types'
// import { FormInstance } from 'element-plus'

// interface Scope {
//   form: FormInstance
//   model: any
// }

// const options: FormOptions[] = [
//   {
//     type: 'input',
//     value: 'admin',
//     prop: 'username',
//     label: '用户名',
//     rules: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
//     attrs: {
//       clearable: true,
//       placeholder: '请输入用户名'
//     }
//   },
//   {
//     type: 'input',
//     value: '1234',
//     prop: 'password',
//     label: '密码',
//     rules: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
//     attrs: {
//       type: 'password',
//       placeholder: '请输入密码',
//       clearable: true,
//       showPassword: true
//     }
//   },
//   {
//     type: 'select',
//     value: '',
//     prop: 'role',
//     label: '职位',
//     attrs: {
//       placeholder: '请选择职位',
//       filterable: true,
//       style: {
//         width: '100%'
//       }
//     },
//     rules: [{ required: true, message: '职位不能为空', trigger: 'change' }],
//     children: [
//       {
//         type: 'option',
//         label: '经理',
//         value: '1'
//       },
//       {
//         type: 'option',
//         label: '主管',
//         value: '2'
//       },
//       {
//         type: 'option',
//         label: '员工',
//         value: '3'
//       }
//     ]
//   },
//   {
//     type: 'checkbox-group',
//     value: [],
//     prop: 'like',
//     label: '爱好',
//     rules: [
//       {
//         required: true,
//         message: '爱好不能为空',
//         trigger: 'change'
//       }
//     ],
//     children: [
//       {
//         type: 'checkbox',
//         label: '足球',
//         value: '1'
//       },
//       {
//         type: 'checkbox',
//         label: '篮球',
//         value: '2'
//       },
//       {
//         type: 'checkbox',
//         label: '排球',
//         value: '3'
//       }
//     ]
//   },
//   {
//     type: 'radio-group',
//     value: '',
//     prop: 'gender',
//     label: '性别',
//     rules: [
//       {
//         required: true,
//         message: '性别不能为空',
//         trigger: 'change'
//       }
//     ],
//     children: [
//       {
//         type: 'radio',
//         label: '男',
//         value: 'male'
//       },
//       {
//         type: 'radio',
//         label: '女',
//         value: 'female'
//       },
//       {
//         type: 'radio',
//         label: '保密',
//         value: 'not'
//       }
//     ]
//   },
//   {
//     type: 'upload',
//     label: '上传',
//     prop: 'pic',
//     uploadAttrs: {
//       action: 'https://jsonplaceholder.typicode.com/posts/',
//       multiple: true,
//       limit: 3
//     },
//     rules: [
//       {
//         required: true,
//         message: '图片不能为空',
//         trigger: 'blur'
//       }
//     ]
//   }
// ]

// const form = ref()

// const resetForm = () => {
//   form.value.resetFields()
// }

// const submitForm = (scope: Scope) => {
//   scope.form.validate((valid, fields) => {
//     if (valid) {
//       console.log(scope.model)
//       ElMessage.success('提交成功！')
//       resetForm()
//     } else {
//       ElMessage.error('请填写必填字段！')
//       console.log(fields)
//     }
//   })
// }

// const handleChange = (val: any) => {
//   console.log('handleChange')
//   console.log(val)
// }

// const handleBeforeUpload = (val: any) => {
//   console.log('handleBeforeUpload')
//   console.log(val)
// }

// const handleSuccess = () => (val: any) => {
//   console.log('handleSuccess')
//   console.log(val)
// }

const dialogVisible = ref<boolean>(false)
const handleIcons = () => {
  dialogVisible.value = !dialogVisible.value
}
</script>

<template>
  <div class="">
    首页

    <div class="icon_item flex jfs">
      <el-button class="select_icon_btn" type="primary" @click="handleIcons"
        >选择图标</el-button
      >
      <el-input class="icon_input" disabled />
    </div>

    <el-dialog v-model="dialogVisible" width="30%" draggable>
      <Icons />
    </el-dialog>

    <!-- <Icons /> -->
    <!-- <Form
      ref="form"
      :options="options"
      label-position="top"
      :status-icon="true"
      @on-change="handleChange"
      @before-upload="handleBeforeUpload"
      @on-success="handleSuccess"
    >
      <template #uploadArea>
        <el-button type="primary">点击上传</el-button>
      </template>
      <template #uploadTip>
        <div style="color: #aaa; font-size: 12px">
          jpg/png的文件大小不能超过500KB.
        </div>
      </template>
      <template #action="scope">
        <el-button @click="resetForm">重置</el-button>
        <el-button type="primary" @click="submitForm(scope as Scope)"
          >提交</el-button
        >
      </template>
    </Form> -->
  </div>
</template>

<style lang="less" scoped>
.icon_item {
  width: 100%;
  .select_icon_btn {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  .icon_input {
    flex-grow: 1;

    :deep(.el-input__wrapper) {
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
    }
  }
}
</style>
